<template>
  <!-- 分组列表 -->

  <a-modal
    v-model:open="visible"
    :title="title"
    class="addStation"
    destroyOnClose
    :width="'50%'"
    @cancel="cancel"
    centered
  >
    <a-form :model="form" layout="inline" :rules="rules" ref="formRef">
      <a-form-item label="分组名称" name="name">
        <a-input
          v-model:value="form.name"
          placeholder="请输入分组名称"
          allow-clear
          style="width: 100%"
        />
      </a-form-item>
    </a-form>
    <a-transfer
      :data-source="projectData"
      show-search
      :filter-option="filterOption"
      :target-keys="targetKeys"
      @change="handleChange"
      @search="handleSearch"
      style="margin-top: 10px"
      :titles="['项目列表', '添加到分组']"
      :operations="['加入右侧 ', '加入左侧']"
      :locale="{
        itemUnit: '',
        itemsUnit: '',
        searchPlaceholder: '请输入搜索内容',
      }"
      :listStyle="{
        width: '50%',
        height: '500px',
      }"
    >
      <template #render="item">
        <span class="custom-item">{{ item.title }}</span>
      </template>
    </a-transfer>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>

const $api = inject("$api")
const form = ref({ name: null, stationIds: [] })
const props = defineProps({
  addGroupVisible: {
    type: Boolean,
    default: false,
  },
  stationList: {
    type: Array,
    default: [],
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
})
const rules = ref({
  name: [{ required: true, trigger: "blur", message: "请输入分组名称" }],
})
const loading = ref(false)
const visible = ref(props.addGroupVisible)
const formRef = ref(null)

const projectData = ref([])
watch(
  () => props.stationList,
  (val) => {
    projectData.value = val.map((item, index) => {
      let obj = {}
      obj.key = item.stationId.toString()
      obj.title = item.stationName
      obj.description = item.stationName
      obj.disabled = false
      return obj
    })
  }
)
watch(
  () => props.addGroupVisible,
  (val) => {
    visible.value = val
    if (props.isEdit) {
      form.value = {
        ...props.rowData,
      }
      if (props.rowData) {
        targetKeys.value = props.rowData.stationIds.map((num) => `${num}`)
      }
    } else {
      form.value = { name: null, stationIds: [] }
      targetKeys.value = []
    }
  }
)
const title = computed(() => {
  if (props.isEdit) {
    return `编辑项目组`
  } else {
    return `新增项目组`
  }
})
//穿梭框过滤
const filterOption = (inputValue, option) => {
  return option.description.indexOf(inputValue) > -1
}
//穿梭框选中
const targetKeys = ref([])
const handleChange = (keys, direction, moveKeys) => {
  targetKeys.value = keys
}
const emits = defineEmits(["update:addGroupVisible"])
const cancel = () => {
  emits("update:addGroupVisible", false)
  formRef.value.resetFields()
}
//提交

const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    if (props.isEdit) {
      if (props.isEdit) {
        // 编辑带上id
        formRef.value.id = props.rowData.id
      }
    }
    loading.value = true
    form.value.stationIds = targetKeys.value
    const res = props.isEdit
      ? await $api.updateProjectGroup(form.value)
      : await $api.addProjectGroup(form.value)
    loading.value = false
    if (res.code === 0) {
      message.success(props.isEdit ? "编辑成功" : "新增成功")
      cancel()
      emits("getGroupList")
    }
  })
}
</script>

<style lang="less" scoped>
.addStation {
  .ant-form-item {
    width: 100% !important;
  }
}
</style>
